<template>
	<view class="classify_layout">
		<view class="list">
			<div class="list_item" v-for=" (item,i) in list" @click="handleIndex(i)">{{item.name}}</div>
		</view>
		<view class="cut_list">
			{{list[cut].name}}
			<view class="tabs">
				<!-- <u-tabs :list="list1" :current="current" @click="click"></u-tabs> -->
				<view class="tabs_cut">
					<view class="img_list" v-for="item in tabs ">
						<view class="tabs_image"
							:style="`background: url(${item.image}) no-repeat; background-size:cover`">
						</view>
						<view>
							<h5><b>{{item.name}}</b></h5>
							<view class="tabs_text">
								<h4 style="color: #FF7098">{{item.meony}}</h4>
								<span>已经有{{item.collect}}个收藏</span>
							</view>
							<view class="tabs_user">
								<u--image :showLoading="true" shape="circle" :src="srced" width="50upx" height="50upx"
									@click="click"></u--image>
								<view class="tabs_context">

									<p class="tabs_p"><b>用户名</b></p>
									<span>粉丝:{{item.bans}}</span>
									<span>关注:{{item.bansed}}</span>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>
<script>
	export default {
		data() {
			return {
				
				srced: 'http://127.0.0.1:7001/public/souare_1.png',
				cut: 0,
				list: [{
						name: "热门推荐",
					},
					{
						name: "手机数码",
					},
					{
						name: "家用电器",
					},
					{
						name: "女装",
					},
					{
						name: "生活百货",
					},
					{
						name: "户外运动",
					},
					{
						name: "乐器",
					},
					{
						name: "美装",
					},
					{
						name: "家具/饰品",
					},
					{
						name: "儿童玩具",
					},

					{
						name: "宠物用品",
					},
					{
						name: "园艺用品",
					},
					{
						name: "热门推荐",
					},
					{
						name: "健身器材",
					},
				],
				tabs:[{
					name:"卡通文具盒",
					meony:"$23",
					collect:'2',
					image:'http://127.0.0.1:7001/public/commodity.png',
					bans:'98',
					bansed:'98'
					
				},
				{
					name:"啊狸布偶一对",
					meony:"$23",
					collect:'2',
					image:'http://127.0.0.1:7001/public/commodity_1.png',
					bans:'98',
					bansed:'98'
				},
				{
					name:"二手女士开通兔子包",
					meony:"$23",
					collect:'2',
					image:'http://127.0.0.1:7001/public/commodity_2.png',
					bans:'98',
					bansed:'98'
				},{
					name:"二手长袖上衣",
					meony:"$23",
					collect:'2',
					image:'http://127.0.0.1:7001/public/commodity_3.png',
					bans:'98',
					bansed:'98'
				}
				],
			};
		},
		methods: {
			handleIndex(i) {
				this.cut = i
			}
		},
		mounted(){
			
		}
	}
</script>
<style lang="scss" scoped>
	.classify_layout {
		display: flex;

		.list {
			width: 300upx;
			height: 100vh;

			// background-color: aquamarine;
			border-right: 1px #ddd solid;

			.list_item {
				height: 80upx;
				text-align: center;
				line-height: 80upx;
				// border: 1px #ddd solid;
			}

			.list_item:hover {
				background-color: #28D2D1;
			}
		}

		.tabs {

			// display: flex;
			.tabs_cut {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-evenly;
				// width: 400px;
				// height: 300px;	
				margin: 0 auto;
				// display: flex;
				// background-color: #5AD3FF;

				.img_list {
					// display: flex;
					// margin: 5px;
					width:260upx;
					height:360upx;

					// background-color: #EF7FAF;
					.tabs_context {
						span {
							font-size: 10upx;
						}
					}

					.tabs_user {

						display: flex;
						align-items: center;
						.tabs_context{
							font-size: 10uxp;
							.tabs_p{
								font-size: 10upx;
							}
						}
					}

					.tabs_text {
						display: flex;
						border-bottom: 1px forestgreen solid;
						justify-content: space-between;

						span {
							font-size: 10upx;
						}
					}

					.tabs_image {
						// display: flex;
						width: 250upx;
						height:180upx;
						// margin: 5px;
						// background-color: #22CCCB;
						background-size: cover;
						background-image: url("http://127.0.0.1:7001/public/commodity.png");
					}
				}
			}
		}
	}
</style>
